<template>
	<view style="flex: auto; display: flex; flex-direction: column">
		<view style="margin-top: 30rpx;" v-if="addressList.length">
			<view class="swiper_box">
				<u-swipe-action  >
					<u-swipe-action-item :options="options" v-for="(item, index) in addressList" :key="index" @click="deleteAddress(item.id)">
						<view class="swipe-action u-border-top u-border-bottom" @click="chooseAddress(item)">
							<view class="swipe-action__content flex alignC botBorder">
								<view style="flex: 1;">
									<view class="flex alignC">
										<text>{{ item.name }}</text>
										<text class="phone">{{ item.phone }}</text>
										<view class="tag" v-if="item.isDefault == '0'">默认</view>
									</view>
									<view class="address">
										{{ item.province }} {{ item.city }} {{ item.district }} {{ item.detailedAddress }}
									</view>
								</view>
								<view class="edit" @click="toPage(`/pagesA/address/editAddress?addressId=${item.id}`)">
									<u-icon name="edit-pen" color="#333" size="28"></u-icon>
								</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</view>
		</view>
		<view v-else class="empty_box" style="margin: 200rpx 0 0;">
			<image src="../../static/img/empty.png" mode=""></image>
			<text>暂无地址</text>
		</view>
		<view class="foot_box" style="flex: none; bottom: 0px;background: #f5f5f5;">
			<view class="large_btn btn_primary" @click="toPage('/pagesA/address/editAddress')">
				新增地址
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		getAddressListApi,
		getAreaApi,
		delAddressApi
	} from '../../common/API/addressApi.js'
	export default {
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d',
						heigth: '100rpx',
						width: '100rpx'
					}
				}],
				type: null, //1: 更换 
				addressList: [],
				showDelete: false
			}
		},
		computed: {
			...mapState('user', ['ylUserInfo'])
		},
		onLoad(options) {
			this.type = options.type
		},
		async onShow() {
			//获取本地地址信息
			const addressList = JSON.parse(uni.getStorageSync('addressList') || '[]')
			if (!addressList.length) {
				await this.getArea()
			}
			await this.getAddressList()
		},
		methods: {
			// 刷新当前页面
			goCurrent() {
				let pages = getCurrentPages()
				let currentPage = pages[pages.length - 1]
				// this.getListPEMember()
			},
			// 选择地址
			chooseAddress(item) {
				if (this.type == 1) {
					let address = `${item.province}${item.city}${item.district}${item.detailedAddress}`
					let addressObj = JSON.stringify(address)
					// 1. 获取当前页面栈实例（此时最后一个元素为当前页）
					let pages = getCurrentPages()

					// // // 2. 上一页面实例
					// // // 注意是length长度，所以要想得到上一页面的实例需要 -2
					// // // 若要返回上上页面的实例就 -3，以此类推
					let prevPage = pages[pages.length - 2]

					// // // 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）
					prevPage.$vm.getValue(this.type, addressObj)
					uni.navigateBack({
						delta: 1
					})
				}
			},

			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				})
			},
			// 获取地址列表
			async getAddressList() {
				console.log("获取地址")
				const res = await getAddressListApi(this.ylUserInfo.username)
				this.addressList = res.data
			},
			// 获取省市区
			async getArea() {
				const res = await getAreaApi()
				uni.setStorageSync('addressList', JSON.stringify(res.data))
			},
			// 删除地址
			async deleteAddress(id) {
				let that = this
				uni.showModal({
					content: `确定要删除该地址吗？`,
					cancelColor:'#9b9b9b',//删除按钮颜色
					confirmColor:'#00B4C7',//确定按钮颜色
					success: async function(res) {
						if (res.confirm) {
							const res = await delAddressApi(id)
							if (res.status == 200) {
								uni.$showMsg('删除成功')
								setTimeout(() => {
									that.getAddressList()
								}, 600)
							}
						}
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #f4f4f4;
	}

	/deep/.uni-swipe {
		width: 100%;

		.u-swipe-action-item {
			touch-action: auto;
			touch-action: pan-y;
		}

		.uni-swipe_box {
			transform: translateX(0);
			-webkit-transform: translateX(0);
		}
	}

	.slot-button {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0 20px;
		background: #FA5151;
		border-top-right-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		color: #fff;
	}

	.swiper_box {
		// height: 100%;
		overflow: auto;
		margin-bottom: 200rpx;
		border-radius: 16rpx;
		background: #fff;
		width: 90%;
		margin: 0 auto;
		padding: 30rpx 10rpx;

		/deep/.u-swipe-action {
			width: 94%;
			margin: 0 auto;
			border-bottom: 1rpx solid #F2F2F2;

			.u-swipe-action-item {
				.u-swipe-action-item__right {
					right: 10rpx;

					.u-swipe-action-item__right__button__wrapper {
						border-radius: 16rpx !important;
					}
				}

				.u-swipe-action-item__content {
					padding: 20rpx 0;
				}
			}

			.u-border-bottom {
				border: none;
			}

			.edit {
				margin-left: 20rpx;
			}
		}

		.tag {
			padding: 2rpx 10rpx;
			background: #00B4C7;
			color: #fff;
			font-size: 22rpx;
			border-radius: 10rpx;
		}

		.phone {
			margin: 0 20rpx;
		}

		.address {
			margin-top: 20rpx;
		}

		.botBorder {
			padding-bottom: 30rpx;
		}
	}
</style>